<template>
  <div class="order-view">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>客户订单</el-breadcrumb-item>
        <el-breadcrumb-item>查看订单</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 操作按钮 -->
    <div class="operation-bar">
      <el-button icon="el-icon-back" @click="$router.push('/order/list')">返回</el-button>
      <el-button type="primary" icon="el-icon-printer">打印</el-button>
      <el-button type="success" icon="el-icon-download">下载</el-button>
      <el-button icon="el-icon-refresh">刷新</el-button>
    </div>

    <!-- 订单内容 -->
    <el-card>
      <el-tabs type="border-card">
        <el-tab-pane label="基本信息">
          <div class="info-section">
            <div class="section-title">基本信息</div>
            <el-descriptions :column="3" border>
              <el-descriptions-item label="订单编号">T2016061801</el-descriptions-item>
              <el-descriptions-item label="客户订单号">AB001001</el-descriptions-item>
              <el-descriptions-item label="客户合同">2005年 上海超人冷链运输合同</el-descriptions-item>
              <el-descriptions-item label="客户名称">上海超人电器有限公司</el-descriptions-item>
              <el-descriptions-item label="订单来源">手工录入</el-descriptions-item>
              <el-descriptions-item label="订单类型">运输订单</el-descriptions-item>
              <el-descriptions-item label="运输方式">公路整车</el-descriptions-item>
              <el-descriptions-item label="接单日期">2016-06-18</el-descriptions-item>
              <el-descriptions-item label="是否急单">否</el-descriptions-item>
              <el-descriptions-item label="操作人">业务二部 刘晓丽</el-descriptions-item>
              <el-descriptions-item label="订单备注" :span="3">无</el-descriptions-item>
            </el-descriptions>
          </div>
        </el-tab-pane>

        <el-tab-pane label="地址信息">
          <div class="info-section">
            <div class="section-title">提货点信息</div>
            <el-descriptions :column="3" border>
              <el-descriptions-item label="发货单位">上海邮乐贸易有限公司</el-descriptions-item>
              <el-descriptions-item label="联系人">黄学明</el-descriptions-item>
              <el-descriptions-item label="电话">021-65776787</el-descriptions-item>
              <el-descriptions-item label="手机">13989898989</el-descriptions-item>
              <el-descriptions-item label="地址" :span="2">江苏省苏州市昆山市康林路800号 九方城 A座 1809室</el-descriptions-item>
              <el-descriptions-item label="取货时间说明" :span="3">上午9点至12点，下午13点至17点，周末不上班</el-descriptions-item>
            </el-descriptions>

            <div class="section-title">收货点信息</div>
            <el-descriptions :column="3" border>
              <el-descriptions-item label="收货单位">上海洋码头贸易有限公司</el-descriptions-item>
              <el-descriptions-item label="联系人">朱泽龙</el-descriptions-item>
              <el-descriptions-item label="电话">021-65776787</el-descriptions-item>
              <el-descriptions-item label="手机">13989898989</el-descriptions-item>
              <el-descriptions-item label="地址" :span="2">江苏省苏州市昆山市康林路800号 九方城 A座 1809室</el-descriptions-item>
              <el-descriptions-item label="收货时间说明" :span="3">上午9点至12点，下午13点至17点，周末不上班</el-descriptions-item>
              <el-descriptions-item label="回单类型">电子回单</el-descriptions-item>
            </el-descriptions>
          </div>
        </el-tab-pane>

        <el-tab-pane label="货物及费用明细">
          <div class="info-section">
            <div class="section-title">货物信息</div>
            <el-table :data="goodsData" border style="width: 100%">
              <el-table-column prop="name" label="货物名称"></el-table-column>
              <el-table-column prop="quantity" label="数量" width="80"></el-table-column>
              <el-table-column prop="weight" label="单件重量(千克)" width="120"></el-table-column>
              <el-table-column prop="length" label="长(米)" width="80"></el-table-column>
              <el-table-column prop="width" label="宽" width="80"></el-table-column>
              <el-table-column prop="height" label="高" width="80"></el-table-column>
              <el-table-column prop="volume" label="单件体积" width="100"></el-table-column>
              <el-table-column prop="package" label="包装" width="80"></el-table-column>
              <el-table-column prop="status" label="运输条件" width="100"></el-table-column>
            </el-table>

            <div class="section-title">费用信息</div>
            <el-descriptions :column="3" border>
              <el-descriptions-item label="运费单价">0.50元/千克</el-descriptions-item>
              <el-descriptions-item label="运费单价">100.00元/立方米</el-descriptions-item>
              <el-descriptions-item label="运费合计">1000.00元</el-descriptions-item>
              <el-descriptions-item label="提货费">0.00元</el-descriptions-item>
              <el-descriptions-item label="装卸费">0.00元</el-descriptions-item>
              <el-descriptions-item label="包装费">0.00元</el-descriptions-item>
              <el-descriptions-item label="保险费">0.00元</el-descriptions-item>
              <el-descriptions-item label="中转费">0.00元</el-descriptions-item>
              <el-descriptions-item label="费用合计">1000.00元</el-descriptions-item>
              <el-descriptions-item label="应收合计">1000.00元</el-descriptions-item>
              <el-descriptions-item label="预付款">0.00元</el-descriptions-item>
              <el-descriptions-item label="代收金额">0.00元</el-descriptions-item>
              <el-descriptions-item label="结算方式">月结</el-descriptions-item>
              <el-descriptions-item label="银行账户信息" :span="2">
                收款单位：上海超人电器有限公司<br>
                开户行：中国交通银行徐汇支行<br>
                账户：989999892348392432
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'OrderView',
  data() {
    return {
      goodsData: [{
        name: '电板砖',
        quantity: 100,
        weight: 5.00,
        length: 4.00,
        width: 10.00,
        height: 10.00,
        volume: 200.00,
        package: '箱',
        status: '正常'
      }]
    }
  }
}
</script>

<style scoped>
.order-view {
  padding: 20px;
}

.breadcrumb {
  margin-bottom: 20px;
}

.operation-bar {
  margin-bottom: 20px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin: 20px 0;
  padding-left: 10px;
  border-left: 4px solid #409EFF;
}

.info-section {
  padding: 20px;
}

.el-descriptions {
  margin-bottom: 30px;
}
</style> 